<template>
	<div>
		<div v-show='zhuyemian'>
			<!--		<h1>消耗品类型管理页面</h1>-->
			<div style="text-align: left">
				<el-button plain  @click="jinhuo" >添加消耗品类型</el-button>
			</div>
			<h1>消耗品类型管理页面</h1>
			<el-table
					:data="istrue?tableData:table"
					border
					style="width: 50%;margin: auto">
				<el-table-column prop="id" label="商品编号"
								 width>
				</el-table-column>
				<el-table-column prop="goods_classify_name" label="商品类型"
								 width>
				</el-table-column>
				<el-table-column prop="beizhuxinxi" label="备注信息"
								 width>
				</el-table-column>
				<el-table-column prop="caozuo" label="操作"
								 width>
					<template slot-scope="scope">
						<el-button size="mini" plain
								   @click="edit(scope.$index, scope.row)">编辑</el-button>
						<el-button type="danger" size="mini"
								   @click="del(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div id="fenye">
				<el-pagination
						background
						layout="prev, pager, next"
						:total="tableData.length"
						:page-size="3"
						:pager-count="7"
						@current-change="changePage">
				</el-pagination>
			</div>
		</div>
		<!--		==下面是编辑-->
		<el-dialog
				title="修改"
				:visible.sync="edit1"
				width="30%"
				center>
			<el-form :label-position="labelPosition" :model="xiugai" :rules="xiugairules" ref="ruleForm"  >
				<el-form-item label="消耗品类型" prop="goods_classify_name">
					<el-input v-model="xiugai.goods_classify_name" clearable></el-input>
				</el-form-item>
				<el-form-item label="备注的信息" prop="beizhuxinxi">
					<el-input v-model="xiugai.beizhuxinxi" clearable></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
    <el-button @click="edit1 = false">取 消</el-button>
    <el-button type="primary" @click="quedingxiugai('ruleForm')">确定修改</el-button>
  </span>
		</el-dialog>
		<!--		====下面是添加=-->
		<div v-show="tianjia" id="tianjia" >
			<h1>进货页面</h1>
			<el-form :label-position="labelPosition" :model="ruleForm" :rules="rules" ref="ruleForm"  >
				<el-form-item label="消耗品类型" prop="goods_classify_name">
					<el-input v-model="ruleForm.goods_classify_name" ></el-input>
				</el-form-item>
				<el-form-item label="备注的信息" prop="beizhuxinxi">
					<el-input v-model="ruleForm.beizhuxinxi" ></el-input>
				</el-form-item>
			</el-form>
			<el-button plain @click="quxiao">取消添加</el-button>
			<el-button plain @click="tijiao('ruleForm')">添加</el-button>
		</div>
	</div>
</template>

<script>
	import {mapActions} from 'vuex'

	export default {
		name:"Xhpgl",
		data(){
			return{
				form:{      //下拉列表
					one:'',
					two:''
				},
				labelPosition: 'right',
				ruleForm: {
					goods_classify_name:'',
					beizhuxinxi:'',
				},
				xiugai:{
					beizhuxinxi:'',
					goods_classify_name:'',
				},
				rules:{         //规则
					goods_classify_name: [
						{ required: true, message: '请选择消耗品类型', trigger: 'blur'  },
					],
					beizhuxinxi: [
						{ required: true, message: '请备注信息', trigger: 'blur' },
					],
				},
				xiugairules:{
					goods_classify_name: [
						{ required: true, message: '请选择消耗品类型', trigger: 'change'  },
					],
					beizhuxinxi: [
						{ required: true, message: '请备注信息', trigger: 'blur' },
					],
				},
				zhuyemian:true,
				tianjia:false,
				mc:false,
				lx:false,
				edit1:false,
				istrue:true,
				table:[]
			}
		},
		created(){
			// console.log(this.tableDataA)
			this.tableDataA(1).then(res=>{

			})
			this.DataCount().then(res => {

			})
		},
		computed:{
			tableData(){
				return this.$store.state.xhplx.tableData
			},
			currentData() {
				return this.$store.state.xhplx.currentData
			},
		},
		methods:{
			...mapActions(['tableDataA','DataCount']),
			del(index,row) {          //删除
				// console.log(index,row)
				this.$confirm('是否删除改条数据?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					center: true
				}).then(() => {
					this.$axios({
						url:'/mgrsite/depotGoodsClassify/delete',
						method: 'post',
						params:{goods_units_name:row.goods_units_name}
					}).then(res=>{
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.istrue=true
						this.tableDataA()
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			edit(index,row){
				this.edit1=!this.edit1
				this.xiugai.id=row.id
				this.xiugai.goods_classify_name=row.goods_classify_name
				this.xiugai.beizhuxinxi=row.beizhuxinxi
			},
			tijiao(formName){
				// 	console.log(this.tableData.goods_units_name)
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$confirm('是否添加？', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							this.$axios({
								url: '/mgrsite/depotGoodsClassify/add',
								method: 'post',
								data: {
									goods_classify_name: this.ruleForm.goods_classify_name,
									beizhuxinxi: this.ruleForm.beizhuxinxi,
								},
							}).then(res => {
								// console.log(res)

								if (res.data.code === 200) {
									this.$message({
										type: 'success',
										message: '添加成功!'
									});
									this.zhuyemian = !this.zhuyemian
									this.tianjia = !this.tianjia
									this.istrue=true
									this.tableDataA(1)
								} else {
									this.$message.error('添加失败！');
								}
							})
						}).catch(() => {
							this.$message({
								type: 'info',
								message: '已取消添加'
							});
						});
					} else {
						// alert("输入的值不能为空")
						this.$message.error('输入的值不能为空！');
					}
				})
			},
			chaxun(){
				let first =document.getElementById('first')
				console.log(first.value)
				if(first.value==='消耗品名称'){
					this.lx=true
					this.mc=false
				}
				else {
					this.mc=true
					this.lx=false
				}
			},
			jinhuo(){
				this.zhuyemian=!this.zhuyemian
				this.tianjia=!this.tianjia
			},
			changePage(val){
				this.tableDataA(val)
			},
			quedingxiugai(formName){           //改
				this.$refs[formName].validate((valid) => {
					if (valid){
						this.$confirm('是否修改？', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							this.$axios({
								url: '/mgrsite/depotGoodsClassify/update',
								method: 'post',
								data: {
									id:this.xiugai.id,
									goods_classify_name: this.xiugai.goods_classify_name,
									beizhuxinxi:this.xiugai.beizhuxinxi
								}
							}).then(res => {
								this.edit1 = !this.edit1
								if (res.data.code ===200) {
									this.istrue=true
									this.tableDataA()
									this.$message({
										type: 'success',
										message: '修改成功!'
									});
								} else{
									this.$message.error('修改失败！');
								}
							})
						});
					} else {
						this.$message.error('输入值有误！');
					}
				});
			},
			quxiao(){       //取消添加货物
				this.zhuyemian=!this.zhuyemian
				this.tianjia=!this.tianjia
				this.tianjia=false
			}
		},
	}
</script>

<style scoped>
	/*===下面是表==*/
	h1{
		margin:10px auto;
		width: 250px;
	}
	.el-table thead{
		margin: auto;
	}

	/*====下面是分页*/
	#fenye{
		margin:10px auto;
		width: 300px;
		text-align: center;
	}

	/*=====下面是添加 */
	#tianjia{
		margin: auto;
	}
	.el-form-item{
		width: 300px;
		margin:11px auto;
	}
	.el-input {
		width: auto;
	}
	.el-input__inner:hover{
		cursor: pointer;
	}
</style>